<template>
  <el-row type="flex" justify="space-between" class="user">
    <div class="item">
      <div class="title">今日学习时长</div>
      <div class="data">
        <template v-if="todayLearnTime.day !== 0">
          <count-roll :number="todayLearnTime.day" />
          <span class="time">天</span>
        </template>
        <template v-if="todayLearnTime.hour !== 0">
          <count-roll :number="todayLearnTime.hour" />
          <span class="time">小时</span>
        </template>
        <template>
          <count-roll :number="todayLearnTime.minute" />
          <span class="time">分钟</span>
        </template>
      </div>
    </div>
    <div class="item">
      <div class="title">累计学习时长</div>
      <div class="data">
        <template v-if="totalLearnTime.day !== 0">
          <count-roll :number="totalLearnTime.day" />
          <span class="time">天</span>
        </template>
        <template v-if="totalLearnTime.hour !== 0">
          <count-roll :number="totalLearnTime.hour" />
          <span class="time">小时</span>
        </template>
        <template>
          <count-roll :number="totalLearnTime.minute" />
          <span class="time">分钟</span>
        </template>
      </div>
    </div>
    <div class="item">
      <div class="title">连续学习天数</div>
      <div class="data">
        <count-roll :number="datas.days" />
        <span class="time">天</span>
      </div>
    </div>
    <div class="item">
      <div class="title">在学课程数</div>
      <div class="data">
        <count-roll :number="datas.course_count" />
        <span class="time">门</span>
      </div>
    </div>
    <div class="item">
      <div class="title">完成课程数</div>
      <div class="data">
        <count-roll :number="datas.finished_course_count" />
        <span class="time">门</span>
      </div>
    </div>
  </el-row>
</template>

<script>
import CountRoll from '@/pages/data/components/count_roll';
export default {
  components: {
    CountRoll
  },
  props: {
    datas: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    todayLearnTime() {
      return this.$util.learnTime(this.datas.today_learn_time)
    },
    totalLearnTime() {
      return this.$util.learnTime(this.datas.total_learn_time)
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  .item {
    padding: 18px;
    text-align: left;
    border-radius: 4px;
    width: calc(20% - 20px);
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    .title {
      font-size: 14px;
    }
    .data {
      font-weight: bold;
      font-size: 22px;
      margin-top: 13px;
      .time {
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
}
</style>
